<template>
  <view>
    <view class="logoBox">
      <nut-avatar size="large" bg-color="#f3238420">
        <image style="width: 100%; height: 100%;" class src="https://online-shopping-mall-1315716959.cos.ap-beijing.myqcloud.com/20250214/c9cbce4ea96b498c85789d34a2efa7f9.png" />
      </nut-avatar>
      <view class="leftBox">
        <view class="topTitle">小程序UI插件</view>
        <view class="topDes">虽然体积大，但是功能也不多啊</view>
      </view>
    </view>
    <view class="container">
      <nut-sticky>
        <view class="top">基础组件</view>
      </nut-sticky>
      <nut-cell-group title="">
        <nut-cell title="" is-link to="/pages/button/index">
          <template #title>
            <view>
              <text>按钮组</text>
              <text style="padding-left: 20rpx">Button 🐶</text>
            </view>
          </template>
          <template #icon>
            <nut-icon font-class-name="iconfont" class-prefix="icon" name="a-haitunkatongdongwu" custom-color="#f32384" size="18px" class="nut-icon-am-bounce nut-icon-am-infinite"/>
          </template>
          <template #link>
            <nut-icon font-class-name="iconfont" class-prefix="icon" name="weird-animal" custom-color="#666666" size="18px"/>
          </template>
        </nut-cell>
      </nut-cell-group>
      <nut-cell-group title="">
        <nut-cell title="" is-link to="/pages/cell/index">
          <template #title>
            <view>
              <text>单元格</text>
              <text style="padding-left: 20rpx">Cell && Cell Group 🐶</text>
            </view>
          </template>
          <template #icon>
            <nut-icon font-class-name="iconfont" class-prefix="icon" name="a-daxiangkatongdongwu" custom-color="#f32384" size="18px" class="nut-icon-am-blink nut-icon-am-infinite"/>
          </template>
          <template #link>
            <nut-icon font-class-name="iconfont" class-prefix="icon" name="weird-animal" custom-color="#666666" size="18px"/>
          </template>
        </nut-cell>
      </nut-cell-group>
      <nut-cell-group title="">
        <nut-cell title="" is-link to="/pages/config/index">
          <template #title>
            <view>
              <text>全局配置</text>
              <text style="padding-left: 20rpx">Config 🐶</text>
            </view>
          </template>
          <template #icon>
            <nut-icon font-class-name="iconfont" class-prefix="icon" name="a-hudiekunchongkatong" custom-color="#f32384" size="18px"/>
          </template>
          <template #link>
            <nut-icon font-class-name="iconfont" class-prefix="icon" name="weird-animal" custom-color="#666666" size="18px"/>
          </template>
        </nut-cell>
      </nut-cell-group>
      <nut-button style='margin-bottom: 10px' type="primary" size="large" @click="onClick('primary')">{{ text }}</nut-button>
      <nut-button style='margin-bottom: 10px' type="warning" size="large" @click="onClick('warning')">{{ textWarning }}</nut-button>
      <nut-button style='margin-bottom: 10px' type="danger" size="large" @click="onClick('danger')">index</nut-button>
      <nut-button style='margin-bottom: 10px' type="success" size="large" @click="onClick('success')">index</nut-button>
      <nut-button style='margin-bottom: 10px' type="success" size="large" @click="onClick('success')">index</nut-button>
      <nut-button style='margin-bottom: 10px' type="success" size="large" @click="onClick('success')">index</nut-button>
      <nut-button style='margin-bottom: 10px' type="success" size="large" @click="onClick('success')">index</nut-button>
      <nut-button style='margin-bottom: 10px' type="success" size="large" @click="onClick('success')">index</nut-button>
      <nut-button style='margin-bottom: 10px' type="success" size="large" @click="onClick('success')">index</nut-button>
      <nut-button style='margin-bottom: 10px' type="success" size="large" @click="onClick('success')">index</nut-button>
      <nut-button style='margin-bottom: 10px' type="success" size="large" @click="onClick('success')">index</nut-button>
      <nut-button style='margin-bottom: 10px' type="success" size="large" @click="onClick('success')">index</nut-button>
      <nut-button style='margin-bottom: 10px' type="success" size="large" @click="onClick('success')">index</nut-button>
      <nut-button style='margin-bottom: 10px' type="success" size="large" @click="onClick('success')">index</nut-button>
      <nut-button style='margin-bottom: 10px' type="success" size="large" @click="onClick('success')">index</nut-button>
      <nut-button style='margin-bottom: 10px' type="success" size="large" @click="onClick('success')">index</nut-button>
      <nut-button style='margin-bottom: 10px' type="success" size="large" @click="onClick('success')">index</nut-button>
      <nut-button style='margin-bottom: 10px' type="success" size="large" @click="onClick('success')">index</nut-button>
      <nut-sticky>
        <view class="top">總覽法国德国</view>
      </nut-sticky>
      <nut-button style='margin-bottom: 10px' type="success" size="large" @click="onClick('success')">index</nut-button>
      <nut-button style='margin-bottom: 10px' type="success" size="large" @click="onClick('success')">index</nut-button>
      <nut-button style='margin-bottom: 10px' type="success" size="large" @click="onClick('success')">index</nut-button>
      <nut-button style='margin-bottom: 10px' type="success" size="large" @click="onClick('success')">index</nut-button>
      <nut-button style='margin-bottom: 10px' type="success" size="large" @click="onClick('success')">index</nut-button>
      <nut-button style='margin-bottom: 10px' type="success" size="large" @click="onClick('success')">index</nut-button>
      <nut-button style='margin-bottom: 10px' type="success" size="large" @click="onClick('success')">index</nut-button>
      <nut-button style='margin-bottom: 10px' type="success" size="large" @click="onClick('success')">index</nut-button>
      <nut-button style='margin-bottom: 10px' type="success" size="large" @click="onClick('success')">index</nut-button>
      <nut-button style='margin-bottom: 10px' type="success" size="large" @click="onClick('success')">index</nut-button>
      <nut-notify></nut-notify>
    </view>
  </view>
</template>

<script lang="ts" setup>
const notify = useNotify();

const text = ref("你好👋");
const textWarning = ref("🐶👋");

function onClick(type: 'primary' | 'warning' | 'danger' | 'success') {
  notify[type]("欢迎使用 nutui-uniapp");
}
</script>

<style lang="scss" scoped>
.logoBox{
  display: flex;
  padding: 20rpx;
  .leftBox{
    display: flex;
    padding-left: 30rpx;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    .topTitle{
      font-size: 24rpx;
      font-weight: 600;
      padding-bottom: 6rpx;
      background: -webkit-linear-gradient(left, $danger-color, $primary-color);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    .topDes{
      font-size: 14rpx;
      font-weight: 400;
      background: -webkit-linear-gradient(left, $warning-color, $primary-color);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
  }
}

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4rpx 20rpx 20rpx;
  background: $help-color;
  border-radius: 30rpx 30rpx 0 0;
  .nut-sticky{
    width: 100%;
  }
  .nut-cell-group{
    width: 100%;
  }
  .top{
    height: 60rpx;
    // width: 100%;
    padding-left: 20rpx;
    background: $help-color;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    color: $primary-color;
    // background: linear-gradient(135deg, $primary-color 0%, $primary-color-end 100%);
    font-size: 14rpx;
  }
}

.logo {
  width: 160rpx;
  height: 160rpx;
  margin: 200rpx auto 50rpx;
}
</style>
